<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生信息管理系统</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f4f4f9;
            color: #333;
            margin: 0;
            padding: 20px;
        }

        h2 {
            color: #5d6d7e;
            border-bottom: 1px solid #ccc;
            padding-bottom: 5px;
            margin-top: 30px;
        }

        form {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 5px;
            font-weight: 600;
        }

        input {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }

        button {
            background-color: #3498db;
            color: #fff;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #2980b9;
        }

        pre {
            background-color: #f0f0f0;
            padding: 20px;
            border-radius: 8px;
            overflow-x: auto;
            white-space: pre-wrap;
            word-wrap: break-word;
        }

        /* 表格样式 */
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }

        th,
        td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        th {
            background-color: #f2f2f2;
        }

        tr:hover {
            background-color: #f5f5f5;
        }

        /* 空数据提示样式 */
        .empty-data {
            text-align: center;
            padding: 20px;
            background-color: #f9f9f9;
            border-radius: 4px;
            margin-top: 10px;
        }
    </style>
</head>

<body>
<!-- 插入学生信息表单 -->
<h2>插入学生信息</h2>
<form id="insertForm">
    <label for="insertName">姓名:</label>
    <input type="text" id="insertName" required>
    <label for="insertSex">性别 (男/女):</label>
    <input type="text" id="insertSex" required>
    <label for="insertAge">年龄:</label>
    <input type="text" id="insertAge" required>
    <label for="insertClass">班级:</label>
    <input type="text" id="insertClass">
    <label for="insertTeacher">班主任:</label>
    <input type="text" id="insertTeacher">
    <label for="insertPhone">电话号码:</label>
    <input type="text" id="insertPhone">
    <label for="insertAddress">地址:</label>
    <input type="text" id="insertAddress">
    <label for="insertInSchool">是否在校 (true/false):</label>
    <input type="text" id="insertInSchool">
    <button type="submit">插入</button>
</form>

<!-- 获取所有学生信息按钮 -->
<h2>获取所有学生信息</h2>
<button id="getAllButton">获取</button>
<div id="studentsContainer"></div>

<!-- 更新学生信息表单 -->
<h2>更新学生信息</h2>
<form id="updateForm">
    <label for="updateId">ID:</label>
    <input type="text" id="updateId" required>
    <label for="updateName">姓名:</label>
    <input type="text" id="updateName" required>
    <label for="updateSex">性别 (男/女):</label>
    <input type="text" id="updateSex" required>
    <label for="updateAge">年龄:</label>
    <input type="text" id="updateAge" required>
    <label for="updateClass">班级:</label>
    <input type="text" id="updateClass">
    <label for="updateTeacher">班主任:</label>
    <input type="text" id="updateTeacher">
    <label for="updatePhone">电话号码:</label>
    <input type="text" id="updatePhone">
    <label for="updateAddress">地址:</label>
    <input type="text" id="updateAddress">
    <label for="updateInSchool">是否在校 (true/false):</label>
    <input type="text" id="updateInSchool">
    <button type="submit">更新</button>
</form>

<!-- 删除学生信息表单 -->
<h2>删除学生信息</h2>
<form id="deleteForm">
    <label for="deleteId">ID:</label>
    <input type="text" id="deleteId" required>
    <button type="submit">删除</button>
</form>

<script>
    // 插入学生信息
    document.getElementById('insertForm').addEventListener('submit', function (e) {
        e.preventDefault();
        const name = document.getElementById('insertName').value;
        const sex = document.getElementById('insertSex').value;
        const age = document.getElementById('insertAge').value;
        const classValue = document.getElementById('insertClass').value;
        const teacher = document.getElementById('insertTeacher').value;
        const phone = document.getElementById('insertPhone').value;
        const address = document.getElementById('insertAddress').value;
        const inSchool = document.getElementById('insertInSchool').value;

        const data = {
            name: name,
            sex: sex,
            age: age,
            class: classValue,
            teacher: teacher,
            phone: phone,
            adders: address,
            inSchool: inSchool
        };

        fetch('http://localhost:8000/insert', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        })
            .then(response => response.text())
            .then(result => alert(result))
            .catch(error => console.error('Error:', error));
    });

    // 获取所有学生信息
    document.getElementById('getAllButton').addEventListener('click', function () {
        const container = document.getElementById('studentsContainer');
        container.innerHTML = '<p>正在加载数据...</p>';

        fetch('http://localhost:8000/get-all-data')
            .then(response => response.json())
            .then(result => {
                // 清空容器
                container.innerHTML = '';

                if (result.length === 0) {
                    // 没有数据时显示提示
                    container.innerHTML = '<div class="empty-data">没有找到学生信息</div>';
                    return;
                }

                // 创建表格
                const table = document.createElement('table');

                // 创建表头
                const thead = document.createElement('thead');
                const headerRow = document.createElement('tr');

                // 表头列
                const headers = ['ID', '姓名', '性别', '年龄', '班级', '班主任', '电话号码', '地址', '是否在校'];
                headers.forEach(header => {
                    const th = document.createElement('th');
                    th.textContent = header;
                    headerRow.appendChild(th);
                });

                thead.appendChild(headerRow);
                table.appendChild(thead);

                // 创建表格内容
                const tbody = document.createElement('tbody');

                result.forEach(student => {
                    const row = document.createElement('tr');

                    // 确保正确处理可能不存在的属性
                    const cells = [
                        student.id || '',
                        student.name || '',
                        student.sex || '',
                        student.age || '',
                        student.class || '',
                        student.teacher || '',
                        student.phone || '',
                        student.adders || '',
                        student.inSchool ? '是' : '否'
                    ];

                    cells.forEach(cellData => {
                        const td = document.createElement('td');
                        td.textContent = cellData;
                        row.appendChild(td);
                    });

                    tbody.appendChild(row);
                });

                table.appendChild(tbody);
                container.appendChild(table);
            })
            .catch(error => {
                console.error('Error:', error);
                container.innerHTML = '<div class="empty-data">获取数据失败，请稍后重试</div>';
            });
    });

    // 更新学生信息
    document.getElementById('updateForm').addEventListener('submit', function (e) {
        e.preventDefault();
        const id = document.getElementById('updateId').value;
        const name = document.getElementById('updateName').value;
        const sex = document.getElementById('updateSex').value;
        const age = document.getElementById('updateAge').value;
        const classValue = document.getElementById('updateClass').value;
        const teacher = document.getElementById('updateTeacher').value;
        const phone = document.getElementById('updatePhone').value;
        const address = document.getElementById('updateAddress').value;
        const inSchool = document.getElementById('updateInSchool').value;

        const data = {
            id: id,
            name: name,
            sex: sex,
            age: age,
            class: classValue,
            teacher: teacher,
            phone: phone,
            adders: address,
            inSchool: inSchool
        };

        fetch('http://localhost:8000/update', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        })
            .then(response => response.text())
            .then(result => alert(result))
            .catch(error => console.error('Error:', error));
    });

    // 删除学生信息
    document.getElementById('deleteForm').addEventListener('submit', function (e) {
        e.preventDefault();
        const id = document.getElementById('deleteId').value;

        const data = {
            id: id
        };

        fetch('http://localhost:8000/delete', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        })
            .then(response => response.text())
            .then(result => alert(result))
            .catch(error => console.error('Error:', error));
    });
</script>
</body>

</html>